<template>
  <div class="prev_box">
    <div class="phone_con">
      <span class="phone-title">欢迎语预览</span>
      <el-scrollbar class="phone_List">
        <div class="bg_friend">
          <div class="public_time">
            {{ DFormat(new Date(), 'yyyy-MM-dd hh:mm') }}
          </div>
          <template v-for="(item, index) in fileList" :key="item.id">
            <div v-if="(index == 0 && item.content) || index > 0" class="user_con">
              <img class="user_avator" src="/static/user.png" alt="" />
              <div class="friend_main">
                <div class="user_name">{{ item.user_name || '张三' }}</div>
                <!--欢迎语-->
                <template v-if="item.type == 0">
                  <div class="welcomeWords">{{ item.content }}</div>
                </template>
                <!-- 图片 -->
                <template v-else-if="item.type == 1">
                  <el-image class="send_image" :src="item.absolute_url" alt="" fit="contain">
                    <template #error>
                      <el-image class="send_image" src="/static/file/pic.png" alt=""></el-image>
                    </template>
                  </el-image>
                </template>
                <!-- 视频 -->
                <template v-else-if="item.type == 2">
                  <div class="video_list">
                    <el-image class="video_image" :src="item.thumbnail_url" alt="" fit="contain">
                      <template #error>
                        <el-image class="video_image" src="/static/file/mov.png" alt=""></el-image>
                      </template>
                    </el-image>
                    <el-image class="video_play" src="/static/play.png" alt="" fit="contain"></el-image>
                  </div>
                </template>
                <!-- 链接 -->
                <template v-else-if="item.type == 3">
                  <div class="user_link">
                    <div class="user_link_tit">{{ item.name }}</div>
                    <div class="user_link_main m_t">
                      <div class="user_link_desc"></div>
                      <el-image :src="item.cover_image_url" alt="" class="user_link_icon" fit="contain">
                        <template #error>
                          <el-image class="user_link_icon" src="/static/file/pic.png" alt=""></el-image>
                        </template>
                      </el-image>
                    </div>
                  </div>
                </template>
                <!-- 音频 -->
                <template v-else-if="item.type == 4">
                  <div class="user_file">
                    <div class="user_file_main">
                      <div class="user_file_desc">{{ item.name }}</div>
                      <el-image :src="item.cur_icon" alt="" class="user_file_icon" fit="contain"></el-image>
                    </div>
                    <!-- <div class="user_file_size">
                      {{ item.file_size ? (item.file_size / 1024 / 1024).toFixed(2) + ' M' : '' }}
                    </div> -->
                  </div>
                </template>

                <!-- 文件 -->
                <template v-else-if="item.type == 5">
                  <div class="user_file">
                    <div class="user_file_main">
                      <div class="user_file_desc">{{ item.name }}</div>
                      <el-image :src="getSuffixIcon(item.name)" alt="" class="user_file_icon" fit="contain"></el-image>
                    </div>
                    <!-- <div class="user_file_size">
              {{ (item?.mediaFileInfo.size / 1024 / 1024).toFixed(2) }}M
            </div> -->
                  </div>
                </template>
                <!-- 抽奖 -->
                <template v-else-if="item.type == 6">
                  <div class="user_file">
                    <div class="user_file_main">
                      <div class="user_file_desc">{{ item.name }}</div>
                      <el-image :src="item.cover_image_url" alt="" class="user_file_icon" fit="cover">
                        <template #error>
                          <el-image class="user_file_icon" src="/static/file/wbgg.png" alt=""></el-image>
                        </template>
                      </el-image>
                    </div>
                  </div>
                </template>

                <!-- 电商素材 -->
                <template v-else-if="item.type == 7 || item.type == 8">
                  <div class="user_link collection_link">
                    <div class="user_link_tit">{{ item.name }}</div>
                    <div class="user_link_main">
                      <div class="user_link_desc desc_url">{{ item.desc }}</div>
                      <el-image :src="item.cur_icon" alt="" class="user_link_icon" fit="contain">
                        <template #error>
                          <el-image class="user_link_icon" src="/static/file/shop.png" alt=""></el-image>
                        </template>
                      </el-image>
                    </div>
                  </div>
                </template>

                <!-- 收集表 -->
                <template v-else-if="item.type == 9">
                  <div class="user_link collection_link">
                    <div class="user_link_tit">{{ item.name }}</div>
                    <div class="user_link_main">
                      <div class="user_link_desc desc_url">{{ item.desc }}</div>
                      <el-image :src="item.cur_icon" alt="" class="user_link_icon" fit="contain">
                        <template #error>
                          <el-image class="user_link_icon" src="/static/file/form.png" alt=""></el-image>
                        </template>
                      </el-image>
                    </div>
                  </div>
                </template>
                <!-- 公众号图文 -->
                <template v-else-if="item.type == 10">
                  <div class="user_file">
                    <div class="user_file_main">
                      <div class="user_file_desc">{{ item.name }}</div>
                      <el-image :src="item.cur_icon" alt="" class="user_file_icon" fit="contain"></el-image>
                    </div>
                  </div>
                </template>
                <!-- 小程序素材 -->
                <template v-else-if="item.type == 11">
                  <div class="miniApp">
                    <div class="mini_box">
                      <img class="mini_icon" src="@/assets/chatDetails/Appletbg.png" alt="" />
                      <div class="miniName">{{ item.name }}</div>
                    </div>
                    <div class="mini_bg">
                      <el-image :src="item?.imgUrl" alt="" class="miniImg" fit="contain">
                        <template #error>
                          <div class="image-slot">
                            <img :src="item.cur_icon" alt="" />
                          </div>
                        </template>
                      </el-image>
                    </div>
                    <div class="mini_bot">
                      <img src="@/assets/chatDetails/Applet.png" alt="" />
                      <span>小程序</span>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </template>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { DFormat, getSuffixIcon } from '@/utils/utils'
  import { withDefaults, defineProps, watch } from 'vue'
  interface Props {
    fileList: any
  }
  const props = withDefaults(defineProps<Props>(), {
    fileList: () => []
  })
</script>

<style scoped lang="scss">
  $num: 2;
  @mixin ellips($num) {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $num;
    line-clamp: $num;
    -webkit-box-orient: vertical;
  }
  .prev_box {
    flex: 1;
    position: absolute;
    right: -480px;
    top: 0;

    .phone_con {
      // justify-content: center;
      position: relative;
      margin: -20px auto;
      width: 244px;
      height: 495px;
      box-sizing: border-box;
      border-radius: 36px;
      border: 9px solid #eef5fe;
      background: url('@/assets/image/channel/phone_bg.png');
      background-size: cover;

      .phone-title {
        position: absolute;
        top: -40px;
        left: 75px;
      }

      .phone_List {
        width: 100%;
        box-sizing: border-box;
        position: absolute;
        top: 48px;
        height: 380px;
        bottom: 48px;
        padding: 7px 10px;

        .bg_friend {
          // width: 100%;

          .public_title {
            font-size: 11px;
            margin-top: -10px;
            text-align: center;
            font-family: STHeitiSC-Light, STHeitiSC;
            font-weight: 300;
            color: #33302d;
          }
          .public_time {
            text-align: center;
            font-size: 11px;
            font-family: STHeitiSC-Light, STHeitiSC;
            font-weight: 300;
            color: #969696;
          }
          .user_con {
            margin-top: 10px;
            display: flex;
            .user_avator {
              width: 22px;
              height: 22px;
              margin-right: 4px;
            }
            .friend_main {
              flex: 1;
              .user_name {
                font-size: 12px;
                margin-top: -8px;
                font-family: STHeitiSC-Medium, STHeitiSC;
                font-weight: 500;
                color: #969696;
                transform: scale(0.6);
                transform-origin: left top;
                margin-bottom: 4px;
              }
              .welcomeWords {
                position: relative;
                margin-top: -23px;
                font-size: 12px;
                color: #969696;
                line-height: 15px;
                transform: scale(0.6);
                transform-origin: left top;
                width: 160px;
                box-sizing: border-box;
                height: 67px;
                overflow: hidden;
                padding: 5px 10px;
                background-color: #fff;
                border-radius: 5px;
                @include ellips(4);
                &::after {
                  content: '';
                  position: absolute;
                  left: -5px;
                  top: 10px;
                  width: 0;
                  height: 0;
                  border-top: 5px solid transparent;
                  border-right: 8px solid #fff;
                  border-bottom: 5px solid transparent;
                }
              }
              .send_image {
                width: 68px;
                height: 46px;
                object-fit: cover;
                margin-top: -23px;
              }
              .luckcy_image {
                width: 50px;
                height: 50px;
                margin-top: -24px;
              }

              .video_list {
                position: relative;
                width: 80px;
                height: 55px;
                margin-top: -23px;

                .video_image {
                  width: 100%;
                  height: 100%;
                }
                .video_play {
                  width: 15px;
                  height: 15px;
                  position: absolute;
                  left: 50%;
                  top: 50%;
                  transform: translate(-50%, -50%);
                }
              }

              .collection_link {
                .user_link_tit {
                  line-height: 20px;
                }
              }
              .user_link {
                // margin-left: 5px;
                margin-top: -23px;
                position: relative;
                width: 151px;
                height: 65px;
                box-sizing: border-box;
                padding: 5px 10px;
                border-radius: 5px;
                background: #ffffff;
                &::after {
                  content: '';
                  position: absolute;
                  left: -5px;
                  top: 10px;
                  width: 0;
                  height: 0;
                  border-top: 5px solid transparent;
                  border-right: 8px solid #fff;
                  border-bottom: 5px solid transparent;
                }
                .user_link_tit {
                  width: 100%;
                  font-size: 12px;
                  font-family: STHeitiSC-Light, STHeitiSC;
                  font-weight: 300;
                  color: #000000;
                  transform: scale(0.83);
                  transform-origin: left top;
                  @include ellips(2);
                }
                .user_link_main {
                  margin-top: 4px;
                  display: flex;
                  .user_link_desc {
                    width: 110px;
                    font-size: 12px;
                    font-family: STHeitiSC-Light, STHeitiSC;
                    font-weight: 300;
                    color: #969696;
                    transform: scale(0.6);
                    transform-origin: left top;
                    margin-top: 2px;
                    @include ellips(3);
                  }
                  .desc_url {
                    line-height: normal;
                  }
                  .user_link_icon {
                    width: 22px;
                    height: 22px;
                  }
                }
                .m_t {
                  margin-top: -15px;
                }
              }
              .user_file {
                position: relative;
                // margin-left: 5px;
                margin-top: -23px;
                width: 150px;
                height: 48px;
                box-sizing: border-box;
                padding: 8px;
                border-radius: 3px;
                background: #ffffff;
                &::after {
                  content: '';
                  position: absolute;
                  left: -5px;
                  top: 6px;
                  width: 0;
                  height: 0;
                  border-top: 5px solid transparent;
                  border-right: 10px solid #fff;
                  border-bottom: 5px solid transparent;
                }
                .user_file_main {
                  display: flex;
                  .user_file_desc {
                    line-height: 14px;
                    width: 105px;
                    font-size: 12px;
                    transform: scale(0.83);
                    transform-origin: left top;
                    margin-bottom: 2px;
                    font-family: STHeitiSC-Light, STHeitiSC;
                    font-weight: 300;
                    color: #000000;
                    @include ellips(2);
                  }
                  .user_file_icon {
                    width: 30px;
                    height: 30px;
                  }
                }
                .user_file_size {
                  // margin-top: 2px;
                  font-family: STHeitiSC-Light, STHeitiSC;
                  font-weight: 300;
                  color: #969696;
                  font-size: 12px;
                  transform: scale(0.6);
                  transform-origin: left top;
                }
              }
              .miniApp {
                width: 150px;
                height: 164px;
                background: #ffffff;
                padding: 10px 5px 10px;
                box-sizing: border-box;
                .mini_box {
                  display: flex;
                  align-items: center;
                  margin-bottom: 7px;
                  .mini_icon {
                    width: 13px;
                    height: 13px;
                    margin-right: 4px;
                  }
                }
                .miniName {
                  line-height: 12px;
                  font-size: 12px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
                .mini_bg {
                  text-align: center;
                  height: 106px;
                  padding-bottom: 5px;
                  border-bottom: 1px solid #eaeaea;
                }
                .mini_bot {
                  line-height: 18px;
                  img {
                    width: 8px;
                    height: 7px;
                  }
                  span {
                    display: inline-block;
                    font-size: 12px;
                    transform: scale(0.68);
                  }
                }
                .miniImg {
                  width: 100%;
                  height: 106px;
                  margin: 0 auto;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
